<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :inline="true"  >
      <el-form-item label="业务类型:" prop="type" >
          <el-select v-model="form.type" placeholder="请选择业务类型" clearable>
              <el-option v-for="i in businessOptions" :key="i.key" :label="i.name" :value="i.key"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="合同类型:" prop="contractType" >
          <el-select v-model="form.contractType" placeholder="请选择合同类型" clearable>
              <el-option v-for="i in contractOptions" :key="i.key" :label="i.name" :value="i.key"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="合同状态:" prop="status" >
          <el-select v-model="form.status" placeholder="请选择合同状态" clearable>
              <el-option v-for="i in contractStatus" :key="i.key" :label="i.name" :value="i.key"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="银行:" prop="bankId">
          <el-select v-model="form.bankId" placeholder="请选择银行" filterable clearable>
              <el-option v-for="i in bankOptions" :key="i.id" :label="i.name" :value="i.id"></el-option>
          </el-select>
      </el-form-item>

      <el-form-item label="企业名称:" prop="entName">
        <el-select
          style="width: 300px;"
          @change="entNameChange"
          v-model="form.entName"
          filterable
          remote
          clearable
          placeholder="请输入企业名称"
          :remote-method="remoteMethod"
          :loading="entNameLoading">
          <el-option
            v-for="item in entNameOptions"
            :key="item.uniscid"
            :label="item.name"
            :value="item.uniscid + '@name' + item.name + '@region' + item.region">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区县:" prop="region">
          <el-select v-model="form.region" placeholder="请选择区县" clearable>
              <el-option v-for="i in cityOptions" :key="i.key" :label="i.name" :value="i.name"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="上传日期:" prop="dateRange">
          <el-date-picker
            v-model="form.dateRange"
            style="width: 280px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <Table 
        class="contractListTable"
        ref="Table" 
        :tableData="tableData" 
        :tableHeadData="tableHeadData" 
        v-loading="tableLoading"
        @getList="getTableList" 
        :total="total"
    />
  </div>
</template>

<script>
import { cityOptions,businessOptions,parseTime,contractOptions,contractStatus } from '@/utils/index'
import { getEnterprise,getContractList,fileDelete,getSignUrl } from '@/api/user'
import { XinrunCommon } from './xinrun.common'
import Table from '@/components/table/table.vue';


export default {
  components:{
    Table
  },
  data() {
    return {
      form: {
        type: '',
        region: '',
        bankId:'',
        entName:'',
        contractType:'',
        dateRange:'',
        status:''
      },
      cityOptions:Object.freeze(cityOptions),
      businessOptions:Object.freeze(businessOptions),
      contractOptions:Object.freeze(contractOptions),
      contractStatus:Object.freeze(contractStatus),
      bankOptions:[],
      entNameOptions:[],
      entNameLoading:false,
      tableData:[],
      tableHeadData:[],
      tableLoading:false,
      currentPageParams:{
          'pageNum': 1,
          'pageSize': 10
      },
      total:0
    }
  },

  async mounted(){
    this.xinrunCommon = new XinrunCommon(this);

    await this.getBanks()
    this.search();
    
  },
  methods: {
    async getTableList({ pageSize = 10, pageNum = 1 } = this.currentPageParams) {
      this.tableLoading = true;
      const condition = this.getCondition();
      const params = {
        rows:pageSize,
        page:pageNum,
        contractParam:{
          ...condition
        }
      };
      // console.log('getTableList', params)
      // return
      const res = await getContractList(params);
      const { data } = res;
      //const data = await this.iDMapServer.getTestData('taskList');
      console.log('data', data)
      this.tableData = data.rows
      this.data = this.fomatData(data.rows);

      this.total = data.total;
      this.tableHeadData = this.xinrunCommon.createTableHeadData(data.rows[0],this);
      this.tableLoading = false;
      //this.$nextTick(_ => this.$refs.Table.doLayout()); //重绘表格 数据变动后表格头错乱
    },
    fomatData(data){
      data.forEach(element => {
        //element.bankid_view = element.bankId ? this.bankOptions.find(i => i.id === element.bankId).name : null;
        //element.createtime_view = element.createTime ? element.createTime.slice(0,10) + '  ' + element.createTime.slice(12,16) : null
        element.fileUploadTime_view = element.fileUploadTime ? parseTime(new Date(element.fileUploadTime).getTime(), '{y}-{m}-{d} {h}:{i}') : null
      });
    },
    search() {
     
      this.getTableList(this.currentPageParams)
      
    },
    getCondition(){      
      console.log('this.form', this.form)
      for(let i in this.form){
        if(i === 'dateRange'){
          if(!this.form[i]){
            this.form['startTime'] = null;
            this.form['endTime'] = null;
          }else{
            this.form['startTime'] = this.form[i][0]
            this.form['endTime'] = this.form[i][1]
          }
        }else{  
          if(this.form[i] === ''){
            this.form[i] = null;
          }
        }
        
      }
      return this.form
      //this.render()
    },
    async getBanks(){
      const data = await this.xinrunCommon.getBanks();
      this.bankOptions = data.data;
    },
    async remoteMethod(query) {
      if (query !== '') {
        this.entNameLoading = true;
        const params = {
          name:query
        }
        const res = await getEnterprise(params);
        console.log('res',res)
        if(res.message === 'SUCCESS')
          this.entNameLoading = false;
          this.entNameOptions = res.data;

        } else {
          this.entNameOptions = [];
        }
    },  
    entNameChange(data){
      console.log('entNameChange',data);
      const region = data.slice(data.indexOf('@region') + 7,data.length);
      const entName = data.slice(data.indexOf('@name') + 5,data.indexOf('@region'));
      this.form.region = region;
      this.form.entName = entName
      console.log('region',region);
    },
    // async download(row){
    //   const { status,id } = row;
    //   if( status === '签署完成'){
    //     const res = await contractDownload({id});
    //     window.open(res.data,'_blank')
    //   }else{
    //     const res = await fileGet({fileId:id})
    //     console.log('fileGet',res);
    //     window.open(res.data,'_blank')
    //   }
      
    // },
    // async launch(row){
    //   const res = await contracLaunch({id:row.id})
    //   console.log('contracLaunch',res);
    //   this.$message.success(res.message)
      
    // },
    deleteRow(row){
      const { id } = row;
      this.$confirm(`确定删除?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        
        fileDelete({ id }).then(res => {
          this.search()
        })
      }).catch(() => {

      });
    },
    async checkGetSignUrl(row){
        this.xinrunCommon.turnOnLoading('.contractListTable' ,'链接加载中，请稍后')
        const { id } = row;
        try{
          const res = await getSignUrl({id});
          this.xinrunCommon.closeLoading();
          console.log('getSignUrl',res);
          this.$confirm(res.data, '', {
            confirmButtonText: '一键复制链接',
          }).then(() => {
            this.$copyText(res.data).then(e => {
                this.$message({
                  message: '已复制到剪贴板',
                  type: 'success'
                });
              })
          }).catch(() => {});
        }catch(err){
          this.xinrunCommon.closeLoading();
        }
    }
  }
}
</script>

<style scoped lang="scss">
 ::v-deep .pagination {
  .el-pagination{
    text-align: center;
  }
 }
 
// /deep/ .el-col-lg-4-8 {
//         width: 20%;
//     }
</style>

